<template>
  <view class="bodys">
    <view class="" style="height: 24%">
      <my-head :merchant-data="merchant.info"></my-head>
    </view>

    <view
      class=""
      style="
        height: 6%;
        background-color: #fff;
        display: flex;
        align-items: center;
        position: relative;
      "
    >
      <!-- <uni-segmented-control
        :current="navbar.current"
        :values="navbar.items"
        :style-type="navbar.styleType"
        :active-color="navbar.activeColor"
        @clickItem="onClickItem"
      /> -->

      <view style="position: absolute; left: 10rpx">
        <tm-tabs
          :list="navbar.items"
          :height="300"
          :default-name="1"
          item-model="line"
          active-color="primary"
          active-font-color="primary"
        >
        </tm-tabs>
      </view>
    </view>

    <view v-if="navbar.current === 1" class="" style="height: 60%">
      <my-t :menu-data="menu.menuData"></my-t>
    </view>

    <view class="billing-box" style="height: 10%">
      <view class="billing-ul">
        <view class="li li1" @click="openShoppingCar">
          <tm-badge
            :count="99999"
            :max-count="store.useOrderStore.selectGoods.length"
            color="red"
            linear="top"
          >
            <image src="../../static/image/shop/shopping.png" mode=""></image>
          </tm-badge>

          <text class="computePrice"
            >¥{{ store.useOrderStore.computePrice }}</text
          >
        </view>
        <view class="li li2">
          <text class="computePrice">配送费 ¥{{ 1 }}</text>
        </view>

        <view class="li li3" @click="billingHandle">
          <view class="billing-button"> 去结算 </view>
        </view>
      </view>
    </view>

    <shopping-car
      ref="shoppingCarRef"
      :list="shoppingCarData.goodsList"
    ></shopping-car>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick, toRefs } from 'vue'
import { onLoad, onLaunch, onShow, onHide } from '@dcloudio/uni-app'

import myHead from './component/detail/head.vue'

import myT from './component/detail/menu.vue'
import shoppingCar from './component/detail/shopping-car.vue'

import { merchantService } from '@/api'
import type { ShopMerchantMenu } from '@/type/merchant/shopMenu'

import { useShoppingCar } from './component/detail/hook/shopping-car/useShopping'

import { useStore } from '@/store'
const store = useStore()

const { shoppingCarData, shoppingCarRef, openShoppingCar } = useShoppingCar()

onLoad(async (option: any) => {
  console.log(option, 'option')
  await initShopMerchantMenuList(option.id)
  await initMenchantInfo(option.id)
})

const menu = reactive({
  menuData: [] as ShopMerchantMenu[],
})
const initShopMerchantMenuList = async (id: string) => {
  const res = await merchantService.getMerchantMenuList(id)
  menu.menuData = res.data as any

  console.log(res.data, '55555555555555')
}

const navbar = reactive({
  items: [
    {
      key: 1,
      title: '点单',
    },
    {
      key: 2,
      title: '评价',
    },
    {
      key: 3,
      title: '商家',
    },
  ],

  current: 1,
})

const billingHandle = () => {
  uni.navigateTo({
    url: '/pages/shopdetail/billing/index',
  })
}

const merchant = reactive({
  info: {},
})
const initMenchantInfo = async (id: string) => {
  const res = await merchantService.getMerchantInfo(id)
  merchant.info = res.data
}
</script>

<style lang="scss" scoped>
.bodys {
  height: 100%;
}

.scroll_box {
  display: flex;
  height: 100%;

  .left_box {
    width: 20%;
    background-color: #f8f9f9;

    .left_item {
      width: 100%;
      height: 100rpx;

      margin-bottom: 5rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .txt {
        font-size: 0.75rem;
        box-sizing: border-box;
        padding: 10rpx;
      }

      .item_box1 {
        width: 100%;
        height: 100%;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        // .xian {
        // 	width: 2px;
        // 	height: 100%;
        // 	background-color: brown;
        // 	position: absolute;
        // 	right: 0;
        // }
      }
    }
  }

  .right_box {
    width: 80%;
    background-color: #f1f3f4;

    .rigth_title {
      width: 100%;
      margin-bottom: 20rpx;
      display: flex;
      justify-content: center;
    }

    .right_item {
      width: 100%;
      margin-bottom: 20rpx;

      .right_item_box {
        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: center;

        .list {
          width: 95%;
          background-color: #fff;
          margin-bottom: 20rpx;
          box-sizing: border-box;
          padding: 20rpx;
          display: flex;
          border-radius: 10rpx;

          .image_box {
            > image {
              width: 175rpx;
              height: 150rpx;
              display: flex;
              align-items: center;
            }
          }

          .des {
          }
        }
      }
    }
  }
}

.billing-box {
  width: 100%;
  height: 120rpx;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  .billing-ul {
    width: 90%;
    height: 70%;
    background-color: #5b5b5b;
    border-radius: 50rpx;
    display: flex;
    box-sizing: border-box;
    padding: 0 20rpx;

    .li1 {
      width: 45%;
      display: flex;
      align-items: center;

      image {
        width: 90rpx;
        height: 90rpx;
      }

      .computePrice {
        color: #fff;
        font-size: 0.85rem;
      }
    }

    .li2 {
      width: 30%;
      display: flex;
      align-items: center;
      justify-content: center;

      > text {
        font-size: 0.75rem;
        color: #898989;
      }
    }

    .li3 {
      width: 25%;
      display: flex;
      align-items: center;
      justify-content: center;

      .billing-button {
        width: 100%;
        height: 75%;
        background-color: #40a9ff;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50rpx;
        color: #fff;
        font-size: 0.75rem;
      }
    }
  }
}
</style>
